<template>
  <view class="address-book">
    <NavBar
      v-if="appInfoStore().isH5"
      title="通讯录"
    />
      <!-- :class="{ 'padding-top-navbar': appInfoStore().isH5 }" -->
    <view
      class="address-book-contnainer"
      :style="{ paddingTop: contentHeight }"
    >
      <view
        class="address-book-search"
        :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
        :style="{ paddingTop: contentHeight }"
      >
        <nut-searchbar
          v-model="searchValue"
          placeholder="搜索"
        >
          <template v-slot:leftin>
            <i
              class="iconfont icon-sousuo"
              style="font-size: 20px; color: #666"
            ></i>
          </template>
        </nut-searchbar>
      </view>
      <view class="address-book-title">
        <view
          class="address-book-title-item"
          v-for="itm in addressBookOther"
          :key="itm.id"
          @click="gotoPage(itm)"
        >
          <view class="book-title-left">
            <view
              class="book-title-left-icon"
              :style="{ backgroundColor: itm.bgColor }"
            >
              <!-- <i
                class="iconfont"
                :class="itm.icon"
                :style="{ color: '#fff', fontSize: itm.fontSize + 'px' }"
              ></i> -->
              <img
                :src="itm.iconImg"
                alt=""
              />
            </view>
            <text class="book-title-left-text">{{ itm.name }}</text>
          </view>
          <view class="book-title-right">
            <i
              class="iconfont icon-youjiantou1"
              style="font-size: 14px; color: #666"
            ></i>
          </view>
        </view>
      </view>
      <view class="address-book-elevator">
        <view class="new-colleague-review">
          <view class="address-book-title-item">
            <view class="book-title-left">
              <view
                class="book-title-left-icon"
                style="background-color: #00be20"
              >
                <img
                  src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01hdWRYy1S9wNcmQoxJ_!!1034622205.png"
                  alt=""
                />
              </view>
              <text class="book-title-left-text">新同事审核</text>
            </view>
            <view class="book-title-right">
              <i
                class="iconfont icon-youjiantou1"
                style="font-size: 14px; color: #666"
              ></i>
            </view>
          </view>
        </view>
        <nut-elevator
          :height="700"
          :index-list="dataList"
          @click-item="clickItem"
          @click-index="clickIndex"
          :is-sticky="true"
        >
          <template v-slot:default="slotProps">
            <view class="address-book-item">
              <img
                class="address-book-img"
                src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01Wq0djF1S9wNR3sp4K_!!1034622205.png"
                alt=""
              />
              <view
                class="address-book-name"
                :style="{ marginLeft: '15px' }"
              >
                <text>{{ slotProps.item.name }}</text>
                <text>{{ slotProps.item.department }}</text>
              </view>
            </view>
          </template>
        </nut-elevator>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import NavBar from "@/components/navBar/index.vue";
import { userInfoStore } from "@/stores/userInfoStore";
import { appInfoStore } from "@/stores/appInfo";
import { navigateTo } from "@tarojs/taro";
import { getNavbarInfo } from "@/utils/system";

const dataList = ref([
  {
    title: "A",
    list: [
      {
        name: "阿萨斯",
        department: "技术部",
        id: 1,
      },
      {
        name: "啊灌灌灌灌",
        department: "技术部",
        id: 2,
      },
    ],
  },
  {
    title: "B",
    list: [
      {
        name: "吧吧吧吧吧",
        department: "技术部",
        id: 3,
      },
      {
        name: "吧吧吧吧吧",
        department: "技术部",
        id: 4,
      },
    ],
  },
  {
    title: "C",
    list: [
      {
        name: "草草草草草",
        department: "技术部",
        id: 5,
      },
      {
        name: "草草草草草",
        department: "技术部",
        id: 6,
      },
    ],
  },
  {
    title: "D",
    list: [
      {
        name: "大大多多",
        department: "技术部",
        id: 7,
      },
      {
        name: "大大多多",
        department: "技术部",
        id: 8,
      },
    ],
  },
  {
    title: "E",
    list: [
      {
        name: "额鹅鹅鹅",
        department: "技术部",
        id: 9,
      },
      {
        name: "额鹅鹅鹅",
        department: "技术部",
        id: 10,
      },
    ],
  },
  {
    title: "F",
    list: [
      {
        name: "发发发发发",
        department: "技术部",
        id: 11,
      },
      {
        name: "发发发发发",
        department: "技术部",
        id: 12,
      },
    ],
  },

  {
    title: "G",
    list: [
      {
        name: "嘎嘎嘎嘎嘎",
        department: "技术部",
        id: 13,
      },
      {
        name: "嘎嘎嘎嘎嘎",
        department: "技术部",
        id: 14,
      },
    ],
  },
  {
    title: "H",
    list: [
      {
        name: "哈哈哈哈",
        id: 15,
      },
      {
        name: "哈哈哈哈",
        id: 16,
      },
    ],
  },
  {
    title: "I",
    list: [
      {
        name: "鹅鹅鹅鹅鹅",
        id: 17,
      },
      {
        name: "鹅鹅鹅鹅鹅",
        id: 18,
      },
    ],
  },
  {
    title: "J",
    list: [
      {
        name: "鸡鸡鸡鸡鸡",
        id: 19,
      },
      {
        name: "鸡鸡鸡鸡鸡",
        id: 20,
      },
    ],
  },
  {
    title: "K",
    list: [
      {
        name: "开开开开开",
        id: 21,
      },
      {
        name: "开开开开开",
        id: 22,
      },
    ],
  },
  {
    title: "L",
    list: [
      {
        name: "啦啦啦啦啦",
        id: 23,
      },
      {
        name: "啦啦啦啦啦",
        id: 24,
      },
    ],
  },
  {
    title: "M",
    list: [
      {
        name: "么么么么么",
        id: 25,
      },
      {
        name: "么么么么么",
        id: 26,
      },
    ],
  },
  {
    title: "N",
    list: [
      {
        name: "嗯嗯嗯嗯嗯",
        id: 27,
      },
      {
        name: "嗯嗯嗯嗯嗯",
        id: 28,
      },
    ],
  },
]);
const addressBookOther = ref([
  {
    id: 0,
    name: "组织",
    icon: "icon-zuzhi",
    fontSize: "28",
    bgColor: "#FF9100",
    iconImg: "https://img.alicdn.com/imgextra/i2/1034622205/O1CN01UsGXjq1S9wNf9YLWg_!!1034622205.png",
  },
  {
    id: 1,
    name: "群组",
    icon: "icon-qunzu",
    fontSize: "20",
    bgColor: "#00BE20",
    iconImg: "https://img.alicdn.com/imgextra/i3/1034622205/O1CN01b44R0G1S9wNfdcwSH_!!1034622205.png",
  },
  {
    id: 2,
    name: "我的部门",
    icon: "icon-wode-active",
    fontSize: "20",
    bgColor: "#1E74FD",
    iconImg: "https://img.alicdn.com/imgextra/i3/1034622205/O1CN01OqHqrn1S9wNdyQ7n3_!!1034622205.png",
  },
  {
    id: 3,
    name: "关注的同事",
    icon: "icon-dunpai-xingxing-tianchong",
    fontSize: "20",
    bgColor: "#F93E42",
    iconImg: "https://img.alicdn.com/imgextra/i1/1034622205/O1CN015OBIfq1S9wNdkJdUf_!!1034622205.png",
  },
]);
const contentHeight = ref();
const navbarStyle = ref({});
//
onMounted(async () => {
  if (process.env.TARO_ENV === "weapp") {
    const { statusBarHeight } = getNavbarInfo();
    navbarStyle.value = {
      paddingTop: `${statusBarHeight}px`,
    };
    contentHeight.value = `calc(44px + ${statusBarHeight}px)`;
  }
});
const gotoPage = (itm: any) => {
  navigateTo({
    url: "/packageB/pages/addressBook/addressBookDetails/index?detailsId=" + itm.id,
  });
};
const clickItem = (key: string, item: any) => {
  console.log(key, JSON.stringify(item));
};

const clickIndex = (key: string) => {
  console.log(key);
};
</script>

<style lang="less">
@import "./index.less";
// @import url("../../../assets/css/index.css");
@import "@/assets/css/index.less";
</style>
